<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            height: 100vh;
            margin: 0;
            background-image: url('../img/background.jpg'); /* 页面背景图 */
            background-repeat: no-repeat;
            background-size: cover; /* 自动调整图像大小以适应整个页面 */
            background-position: center;
        }
        .container {
            width: 80%;
            max-width: 800px;
            text-align: center;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(5px); /* 增强毛玻璃效果 */
            background-color: rgba(255, 255, 255, 0.1); /* 增加透明度 */
        }
        .table-container {
            position: relative;
            width: 100%;
            overflow: hidden;
            margin-bottom: 10px; /* 减少大表格之间的间距 */
            border: 1px solid #ddd; /* 添加边框 */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
            backdrop-filter: blur(5px); /* 增强毛玻璃效果 */
            background-color: rgba(255, 255, 255, 0.1); /* 增加透明度 */
        }
        h1 {
            margin-bottom: 20px;
            position: relative;
            z-index: 1;
            font-size: 24px;
            color: #333;
        }
        h2 {
            margin-top: 10px;
            margin-bottom: 10px;
            font-size: 16px; /* 减小功能组标题字体大小 */
            color: #333;
            position: relative;
            z-index: 1;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            z-index: 1;
            position: relative;
            backdrop-filter: blur(5px); /* 增强毛玻璃效果 */
            background-color: rgba(255, 255, 255, 0.1); /* 增加透明度 */
        }
        th, td {
            border: 1px solid #ddd;
            padding: 10px;
            text-align: center;
            vertical-align: top;
            font-size: 12px; /* 减小字体大小 */
        }
        .feature-name {
            font-size: 12px; /* 减小功能名称字体大小 */
            font-weight: bold;
        }
        .feature-description {
            font-size: 10px; /* 减小功能描述字体大小 */
            color: #555;
        }
        .empty-cell {
            background-color: rgba(255, 255, 255, 0.2); /* 增加透明度 */
        }
        .footer {
            margin-top: 20px;
            position: relative;
            z-index: 1;
            backdrop-filter: blur(5px); /* 增强毛玻璃效果 */
            background-color: rgba(255, 255, 255, 0.1); /* 增加透明度 */
            font-size: 12px; /* 减小字体大小 */
        }
    </style>
    <title>San-plugin</title>
</head>
<body>

<div class="container">
    <h1>San-plugin</h1>

    <div id="tablesContainer"></div>

    <div class="footer">Created by San-plugin @散San</div>
</div>

<script>
    // 插件帮助数据对象数组
    const pluginHelpData = [
        {
            title: "---------表情添加---------",
            features: [
                ["#san设置表情添加开启(关闭)", "开启(关闭)表情添加功能,重启生效"],
                ["#san设置表情添加仅主人开启(关闭)", "开启后仅有主人可添加表情"],
                ["#san设置表情群组分离开启(关闭)", "开启后仅有全局表情和对应群组的表情可触发"],
                ["#添加xxx", "添加随机关键词回复"],
                ["#表情列表", "查看添加的所有表情及数量"],
                ["#来点xxx", "随机回复10张此关键词表情"],
                ["#连续添加xxx", "连续添加随机关键词回复,结束请发#结束添加"],
                ["#表情删除", "需引用bot所发表情,删除对应单项表情"],
                ["#表情删除全部项xxx", "删除指定关键词对应的全部表情,仅主人可用"]
            ]
        },
        {
            title: "---------气象信息---------",
            features: [
                ["xxx天气", "获取天气卡片,支持模糊关键词"],
                ["极端天气", "查看当前极端天气地区"],
                ["xxx空气", "获取空气质量卡片,支持模糊关键词"],
                ["xxx空气排行", "可查看此地区的空气质量排行"],
            ]
        },
        {
            title: "---------戳一戳---------",
            features: [
                ["#san设置戳一戳仅bot(开启|关闭)", "开启后仅有戳bot才可触发戳一戳"],
                ["#戳一戳(开启|关闭|全部)列表", "查看(开启|关闭|全部)的api列表"],
                ["#戳一戳设置名称 api", "添加戳一戳api,添加默认开启 注意存在空格"],
                ["#戳一戳全部(开启|关闭)", "(开启|关闭)全部戳一戳api"],
                ["#戳一戳(开启|关闭)xxx", "开启关闭指定api"],
                ["#戳一戳全部删除", "删除全部api 慎重使用"],
                ["#戳一戳删除xxx", "删除指定api"],
            ]
        },
        {
            title: "---------其他小功能---------",
            features: [
                ["#去背景", "获取去除背景后的图像"],
                ["#留言", "可向bot主人留言"],
                ["取", "需引用消息,发送引用消息的e实例"]
            ]
        },
        {
            title: "---------其他设置类---------",
            features: [
                ["#san设置", "查看San插件的设置信息"],
                ["#san设置图像质量100", "设置图像生成质量,范围为1-100"],
                ["#san(强制)更新", "更新San插件,报错请强制更新"]
            ]
        }
    ];

    // 创建表格函数
    function createTable(data) {
        const tablesContainer = document.getElementById('tablesContainer');

        data.forEach(group => {
            const tableContainer = document.createElement('div');
            tableContainer.className = 'table-container';

            const groupTitle = document.createElement('h2');
            groupTitle.textContent = group.title;

            const table = document.createElement('table');
            let row;

            group.features.forEach((feature, index) => {
                if (index % 4 === 0) {
                    row = table.insertRow(); // 每4个单元格开始新的一行
                }
                const cell = row.insertCell();
                const featureName = document.createElement('div');
                featureName.className = 'feature-name';
                featureName.textContent = feature[0]; // 插入功能名称
                
                const featureDescription = document.createElement('div');
                featureDescription.className = 'feature-description';
                featureDescription.textContent = feature[1]; // 插入功能描述
                
                cell.appendChild(featureName);
                cell.appendChild(featureDescription);
            });

            // 如果最后一行不满4个单元格，则用空单元格填充
            while (row && row.cells.length < 4) {
                const emptyCell = row.insertCell();
                emptyCell.className = 'empty-cell'; // 设置空单元格样式
            }

            tableContainer.appendChild(groupTitle);
            tableContainer.appendChild(table);

            tablesContainer.appendChild(tableContainer);
        });
    }

    createTable(pluginHelpData); // 调用创建表格函数
</script>

</body>
</html>



